<template>
	<BOX title="这是标题 leftone">
		<template #content>
			<div style="width: 100%;height: 300px;">
				<echarts :option="option"></echarts>
			</div>

		</template>
	</BOX>
</template>

<script lang="ts" setup>
	import BOX from "@/components/z-box/index.vue"
	import echarts from '@/components/z-echarts/index.vue';
	import { reactive } from "vue"
	var xAxisData = [];
	var data1 = [];
	var data2 = [];
	for (var i = 0; i < 100; i++) {
		xAxisData.push('A' + i);
		data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
		data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
	}
	const option = reactive({
		textStyle: {
			color: "#fff",
		},
		title: {
			text: 'biaoti',
			textStyle: {
				color: "#fff"
			},
		},
		legend: {
			data: ['bar', 'bar2']
		},
		toolbox: {
			// y: 'bottom',
			iconStyle:{
				color:"#fff"
			},
			feature: {
				magicType: {
					type: ['stack']
				},
				dataView: {},
				saveAsImage: {
					pixelRatio: 2
				}
			}
		},
		tooltip: {},
		xAxis: {
			data: xAxisData,
			splitLine: {
				show: false
			}
		},
		yAxis: {},
		legend:{
			textStyle:{
				color:"#fff"
			}
		},
		series: [
			{
				name: 'bar',
				type: 'bar',
				
				data: data1,
				emphasis: {
					focus: 'series',
				},
				animationDelay: function (idx) {
					return idx * 10;
				}
			},
			{
				name: 'bar2',
				type: 'bar',
				data: data2,
				emphasis: {
					focus: 'series'
				},
				animationDelay: function (idx) {
					return idx * 10 + 100;
				}
			}
		],
		animationEasing: 'elasticOut',
		animationDelayUpdate: function (idx) {
			return idx * 5;
		}
	});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>